import React, { memo, useCallback, useState } from 'react';
import { Button, message, Modal, Form, Icon } from 'antd';

import { isSuccess } from '@/utils/request';

import { financialRecheck } from '@/services/salaryManage/salaryCalculate';

import LimitInput from '@/components/LimitInput';

import rejectStyles from '@/pages/SalaryManage/SalaryCalculate/Recheck/components/CheckHandle/index.less';

const { batchReject } = financialRecheck;

const RejectModal = Form.create()(({ form, year, organizationCode, month, updateStateFn, cancelFn }) => {
    //  弹窗=》确定按钮是否加载状态
    const [confirmLoad, setConfirmLoad] = useState(false);

    const { getFieldDecorator } = form;

    // 弹窗确定按钮
    const modelOk = useCallback(async () => {
        form.validateFields(async (errors, value) => {
            setConfirmLoad(true);
            const rejectRes = await batchReject({
                year,
                month,
                organizationCode,
                ...value
            });
            if (isSuccess(rejectRes)) {
                message.success('驳回成功');
                updateStateFn();
            } else {
                message.error(rejectRes.msg);
            }
        });
    }, [form, month, organizationCode, updateStateFn, year]);

    return (
        <Modal
            title="驳回"
            visible
            onOk={modelOk}
            onCancel={cancelFn}
            destroyOnClose
            centered
            confirmLoading={confirmLoad}
        >
            <div className={rejectStyles.msg}>
                <Icon type="exclamation-circle" theme="filled" />
                将驳回全部的薪资，请确认
            </div>
            <Form layout="inline" className={rejectStyles.recheckForm}>
                <Form.Item label="驳回备注">
                    {getFieldDecorator('remark')(
                        <LimitInput rows={4} cols={45} maxLength={200} area showNumber placeholder="请输入" />
                    )}
                </Form.Item>
            </Form>
        </Modal>
    );
});

// 全量驳回
const BatchReject = memo(({ handleItem, year, organizationCode, month, selectedRows, updateStateFn }) => {
    //  驳回弹窗
    const [visible, setVisible] = useState(false);

    const handleFn = useCallback(async () => {
        if (selectedRows && selectedRows.length > 0) {
            message.warn('驳回为全量行为，请直接点击按钮');
            return;
        }
        setVisible(true);
    }, [selectedRows]);

    return (
        <>
            <Button key={handleItem.code} onClick={handleFn}>
                驳回
            </Button>
            {visible ? (
                <RejectModal
                    month={month}
                    year={year}
                    updateStateFn={updateStateFn}
                    organizationCode={organizationCode}
                    cancelFn={() => setVisible(false)}
                />
            ) : null}
        </>
    );
});

export default memo(BatchReject);
